<template>
  <div class="side-menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical"
      :collapse="isCollapse"
      :router="true"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <!-- 首页 -->
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      
      <!-- 摄影作品 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-picture-outline"></i>
          <span>摄影作品</span>
        </template>
        <el-menu-item index="/photos/phone">
          <i class="el-icon-mobile-phone"></i>
          <span slot="title">手机摄影</span>
        </el-menu-item>
        <el-menu-item index="/photos/camera">
          <i class="el-icon-camera"></i>
          <span slot="title">相机摄影</span>
        </el-menu-item>
        <el-menu-item index="/photos/award">
          <i class="el-icon-trophy"></i>
          <span slot="title">获奖作品</span>
        </el-menu-item>
      </el-submenu>
      
      <!-- 用户中心 -->
      <el-submenu index="3" v-if="user && user.userId">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>用户中心</span>
        </template>
        <el-menu-item index="/user/profile">
          <i class="el-icon-user-solid"></i>
          <span slot="title">个人资料</span>
        </el-menu-item>
        <el-menu-item index="/user/photos">
          <i class="el-icon-picture"></i>
          <span slot="title">我的作品</span>
        </el-menu-item>
        <el-menu-item index="/user/collections">
          <i class="el-icon-star-on"></i>
          <span slot="title">我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/user/votes">
          <i class="el-icon-thumb"></i>
          <span slot="title">我的投票</span>
        </el-menu-item>
        <el-menu-item index="/user/comments">
          <i class="el-icon-chat-line-round"></i>
          <span slot="title">我的评论</span>
        </el-menu-item>
        <el-menu-item index="/user/likes">
          <i class="el-icon-sunny"></i>
          <span slot="title">我的点赞</span>
        </el-menu-item>
        <el-menu-item index="/user/contest">
          <i class="el-icon-trophy"></i>
          <span slot="title">参赛报名</span>
        </el-menu-item>
      </el-submenu>
      
      <!-- 管理员功能 -->
      <el-submenu index="4" v-if="user && user.role === 2">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>管理员功能</span>
        </template>
        <el-menu-item index="/admin/photos">
          <i class="el-icon-picture-outline"></i>
          <span slot="title">作品管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/users">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/comments">
          <i class="el-icon-chat-dot-round"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/contestants">
          <i class="el-icon-s-custom"></i>
          <span slot="title">参赛选手管理</span>
        </el-menu-item>
      </el-submenu>
      
      <!-- 关于我们 -->
      <el-menu-item index="/about">
        <i class="el-icon-info"></i>
        <span slot="title">关于我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'SideMenu',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    activeIndex() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.side-menu {
  height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-vertical {
  height: 100%;
  border-right: none;
}
</style> 